<template>
  <div class="app-container">
    <!--新增修改弹出层-->
    <el-card class="box-card">
      <el-col :offset="22" style="margin-bottom: 5px">
        <el-button plain @click="$router.back(-1)">返回</el-button>
      </el-col>
      <div class="newdetails_head">
        <div class="newdetails_headT">
          {{temp.title}}
        </div>
      </div>
      <div class="newdetails_bd">
        <!-- <div class="newdetails_bd_u">
          <div class="newdetails_bd_u_item" v-for="o in bannerFileList" :key="o.url">
            <img :src="o.url">
          </div>
        </div> -->
        <div class="newdetails_bd_m" v-html="temp.content">

        </div>
        <div class="newdetails_bd_city">
          <div class="newdetails_bd_cityt">
             {{region.area}}-{{region.city}}--{{region.province}}-{{region.street}}
          </div>
          <div class="newdetails_bd_cityb">
            {{time | parseTime('{y}年-{m}月-{d}日')}}
          </div>
        </div>
        <div class="newdetails_bd_f">
          <div class="newdetails_bd_f_lf">
            附件
          </div>
          <div class="newdetails_bd_u_item" v-for="o in fileList" :key="o.url">
            <img :src="o.url">
            <a :href="o.url">下载</a>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { queryPage, create, update, deleteById, queryInfo } from "@/api/news";
import Tinymce from "@/components/Tinymce";
import RegionSelector from "@/components/RegionSelector";
import { packRegionCode } from "@/utils/region";

export default {
  components: {
    Tinymce,
    RegionSelector
  },
  data() {
    return {
      time: "",
      height: 500,
      content: "",
      list: null,
      total: 0,
      listLoading: true,
      username: "",
      listQuery: {
        page: 1,
        size: 10,
        searchStr: null,
        type: null,
        sort: "+id"
      },
      defTypeOptions: this.$store.state.dict.options["newsType"],
      baseURL: process.env.BASE_API,
      uploadURL: process.env.BASE_API + "/file/upload",
      dialogFormVisible: false,
      dialogStatus: "",
      dialogImageUrl: "",
      dialogVisible: false,
      textMap: {
        update: "更新",
        create: "添加"
      },
      bannerFileList: [],
      fileList: [],
      enabledMap: {
        true: "启用",
        false: "禁用"
      },
      temp: {
        id: null,
        type: null,
        title: null,
        banner: null,
        content: null,
        files: []
      },
      region: {
        province: 0,
        city: 0,
        area: 0,
        street: 0,
        community: 0
      },
      rules: {}
    };
  },
  mounted: function() {
    if (this.$route.query.id) {
      this.handleUpdate(this.$route.query.id);
      this.time = this.$route.query.time;
    }
  },
  methods: {
    handleUpdate(id) {
      this.bannerFileList = [];
      this.fileList = [];
      queryInfo(id).then(res => {
        this.temp = res.data;
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
        let tempBannerFile = {
          fileId: this.temp.banner,
          url: this.baseURL + "/file/" + this.temp.banner
        };
        this.bannerFileList.push(tempBannerFile);
        res.data.files.forEach(element => {
          let tempFile = {
            fileId: element.fileId,
            name: element.fileName,
            url: this.baseURL + "/file/" + element.fileId
          };
          this.fileList.push(tempFile);
        });
        //地区处理
        let areaCode = res.data.areaCode;
        if (areaCode && areaCode.length > 5) {
          this.region = packRegionCode(areaCode);
        }
      });
    }
  }
};
</script>

<style scoped>
.newdetails_bd_city {
  width: 80%;
  margin: 0 auto;
  height: 60px;
  margin-top: 25px;
}
.newdetails_bd_cityt {
  height: 22px;
  width: 100%;
  text-align: right;
  padding-right: 50px;
  font-size: 14px;
  color: #333;
}
.newdetails_bd_cityb {
  margin-top: 7px;
  height: 22px;
  width: 100%;
  text-align: right;
  padding-right: 50px;
  font-size: 14px;
  color: #333;
}
.newdetails_bd_f {
  margin-top: 35px;
  display: flex;
  height: 180px;
}
.newdetails_bd_f_lf {
  margin-left: 5%;
  font-size: 24px;
  height: 100px;
  line-height: 32px;
  color: #000;
  margin-right: 10px;
}
.newdetails_bd_m {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 80%;
  margin: 0 auto;
}

.newdetails_bd_m img {
  margin: 0 auto !important;
}
.newdetails_bd_u_item a {
  width: 100%;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  display: block;
  text-align: center;
  line-height: 30px;
  background-color: #409eff;
  font-size: 12px;
  color: #fff;
  margin-top: 10px;
  overflow: hidden;
}
.newdetails_bd_u_item {
  float: left;
  width: 120px;
  height: 180px;
  margin-right: 15px;
}

.newdetails_bd_u_item img {
  max-width: 100%;
  height: 120px;
}

.newdetails_bd_u {
  width: 100%;
  display: flex;
  justify-content: center;
}

.newdetails_headC {
  color: #333;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: right;
  padding-right: 25px;
}

.newdetails_headT {
  font-size: 24px;
  color: #000;
  font-weight: 700;
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.newdetails_bd {
  width: 100%;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 50px;
}

.newdetails_head {
  height: 40px;
  width: 100%;
  overflow: hidden;
}
</style>